<template>
	<view class="gdc">
	
		<!-- <u-image mode="aspectFill" style=" width: 100%;    height: 25vh;" :src="img"></u-image> -->
		<img mode="aspectFill" style=" width: 100%; height:25vh ;   position: relative;top: 0;" :src="img">  
		<view class="content">
			<!-- 	<scroll-view class="scrollviewCss" :scroll-y="true" :show-scrollbar="false" :refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="45" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @scrolltolower="scrollBottem"> -->

			<view class="header">
				<view class="one">
					<view style=" width: 120rpx;height: 120rpx;float: left;">
						<view class="hole" :data-content='contnetVar'></view>
					</view>
					<view class="title" style="	font-size: 36rpx;font-weight: bold;">
						{{postName.length == 0 ? '岗位未选择': postName.postName}}
						<view style="font-size: 30rpx;color: #999999;margin-top: 28rpx;">
							岗位名称 <span style="float: right;" @click="Togwxz">选择
								&nbsp;></span>
						</view>
					</view>
				</view>
				<view>
					<u-grid :col="3" :border="false">
						<u-grid-item @click="request1">
							<!-- <i class="iconfont icon-weijiegongdan" style="font-size: 60rpx;color: #9f9f9f;"></i> -->
							<u-image width="72rpx" height="72rpx" :src="num==1 ? select_4 : select4" class="images">
							</u-image>
							<view class="grid-text">备料中: {{plan}}</view>
						</u-grid-item>
						<u-grid-item @click="request2">
							<!-- <i class="iconfont icon-liuchengcailiaobiao" style="font-size: 60rpx;color: #9f9f9f;"></i> -->
							<u-image width="72rpx" height="72rpx" :src="num==2 ? select_5 : select5" class="images">
							</u-image>
							<view class="grid-text">未领取: {{noReceive}}</view>
						</u-grid-item>
						<u-grid-item @click="request3">
							<!-- <i class="iconfont icon-yunshu" style="font-size: 60rpx;color: #9f9f9f;"></i> -->
							<u-image width="72rpx" height="72rpx" :src="num==3 ? select_6 : select6" class="images">
							</u-image>
							<view class="grid-text">AOG: {{aog}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view v-if="list.length > 0">
				<view class="vis" style="margin-bottom: 10px;" v-for="(item,index) in list" :key="index"
					@click="Togdcdetails(item)">
					<view style="padding: 12rpx 0;display: inline-table; width: 100%;  ">
						<span style="float: left;margin-left: 2px;display: flex;align-items: center;">
							{{item.orderNo}}&nbsp;&nbsp;{{item.deptName}}
							<span v-for="(v,i) in dictValue" :key="i">

								<u-tag v-if="v.dictValue === item.urgentDegree" :text=" v.dictLabel " mode="dark"
									:bg-color="v.dictValue== 10 ? '#f06868' : v.dictValue== 20 ?'#d5ba04' : '#4a9add'"
									color="#fff"
									:border-color="v.dictValue== 10 ? '#f06868' : v.dictValue== 20 ?'#d5ba04' : '#4a9add'"
									style="margin:-2px 0 0 10rpx;" />
							</span>
						</span>
						<i class="iconfont icon-yuanxingdecircular223" v-if="item.delayFlag==2"
							style="float: right;color: #f42d2d;font-size: 38rpx;"></i>
						<i class="iconfont icon-shalou" v-if="item.delayFlag==0"
							style="float: right;color: #2c6ee5;font-size: 38rpx;padding: 0 7px;"></i>
					</view>
					<view style="padding: 12rpx 0;display: flex;    align-items: center;    width: 100%;">
						<i class="iconfont icon-dingwei"
							style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
						<view style="float: left;padding-top: 2px;">{{item.startAddress}} - {{item.endAddress}}
						</view>
					</view>
					<view style="padding: 12rpx 0;display: flex;    align-items: center;    width: 100%;">
						<i class="iconfont icon-shijian"
							style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
						<view style="float: left;padding-top: 2px;">时限：{{item.timeLimit}}</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list"></u-empty>
			<!-- 2 -->
			<!-- 	<view class="vis" style="margin-bottom: 10px;">

					<view style="padding: 12rpx 0;display: inline-table; width: 100%;  ">
						<span style="float: left;margin-left: 2px;display: flex;align-items: center;">
							DH-12421545445464&nbsp;&nbsp;福州航空
							<u-tag text="一般" mode="dark" bg-color="#4a9add" color="#fff" border-color="#4a9add"
								style="margin:-2px 0 0 10rpx;" />
						</span>
						<i class="iconfont icon-yuanxingdecircular223"
							style="float: right;color: #f42d2d;font-size: 38rpx;"></i>
						<i class="iconfont icon-shalou"
							style="float: right;color: #2c6ee5;font-size: 38rpx;padding: 0 7px;"></i>
					</view>
					<view style="padding: 12rpx 0;display: flex;    align-items: center;    width: 100%;">
						<i class="iconfont icon-dingwei"
							style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
						<view style="float: left;padding-top: 2px;">机库 - 主库</view>
					</view>
					<view style="padding: 12rpx 0;display: flex;    align-items: center;    width: 100%;">
						<i class="iconfont icon-shijian"
							style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
						<view style="float: left;padding-top: 2px;">时限：2021-05-20 05:01:01</view>
					</view>
				</view> -->
			<!-- 结束 -->



			<!-- </scroll-view> -->
		</view>
	</view>
</template>
<script>
	import {
		PostListWorking,
		OrderSum,
		Dist_Data_Type,
		OrderList
	} from "@/pages/api/api"
	export default {
		data() {
			return {
				contnetVar: "0",
				img: require('../../static/images/gdcbg.jpg'),
				select4: require('../../static/images/4.png'),
				select5: require('../../static/images/5.png'),
				select6: require('../../static/images/6.png'),
				select_4: require('../../static/images/4_1.png'),
				select_5: require('../../static/images/5_1.png'),
				select_6: require('../../static/images/6_1.png'),
				postName: [],
				plan: 0,
				noReceive: 0,
				aog: 0,
				num: 2,
				list: [],
				dictValue: []
			}
		},
		async onShow() {
			await PostListWorking({
				userId: uni.getStorageSync('userId')
			}).then(res => {
				if (res.code == 200 && res.data.length > 0) {
					this.postName = res.data[0]
					OrderSum({
						receiveState: 0,
						'params[postId]': res.data[0].postId
					}).then(v => {
						// console.log("工单池", v)
						if (v.code == 200) {
							this.plan = v.data.plan;
							this.noReceive = v.data.noReceive;
							this.aog = v.data.aog;
							this.contnetVar = v.data.noReceive;
						}

					})

				}

			})
			Dist_Data_Type("wo_urgent_degree").then(res => {
				this.dictValue = res.data;
				console.log(res.data)
			})
			this.request2()

		},
		methods: {
			request1() {
				OrderList({
					receiveState: 0,
					orderState: 10,
					'params[postId]': this.postName.postId
				}).then(res => {
					console.log("备料中", res)
					if (res.code == 200) {
						this.list = res.rows;
						uni.stopPullDownRefresh()
					}
				})
				this.num = 1;
			},
			request2() {
				OrderList({
					receiveState: 0,
					'params[postId]': this.postName.postId
				}).then(res => {
					console.log("未领取", res)
					if (res.code == 200) this.list = res.rows, uni.stopPullDownRefresh(); // 需要重置
				})
				this.num = 2;
			},
			request3() {
				OrderList({
					receiveState: 0,
					urgentDegree: 10,
					'params[postId]': this.postName.postId
				}).then(res => {
					console.log("AOG", res)
					if (res.code == 200) this.list = res.rows, uni.stopPullDownRefresh(); // 需要重置
				})
				this.num = 3;
			},
			Togdcdetails(item) {
				uni.navigateTo({
					url: './gdcdetails?obj=' + JSON.stringify(item)
				});
			},
			Togwxz() {
				uni.navigateTo({
					url: '../my/gwxz?id=1'
				});
			},
			// onRefresh() {
			// 	setTimeout(() => {
			// 		this.triggered = false;
			// 	}, 1500)
			// 	if (this.num == 1) {
			// 		this.request1();
			// 	} else if (this.num == 2) {
			// 		this.request2();
			// 	} else {
			// 		this.request3();
			// 	}

			// 	// console.log("进入");
			// },
			// /* 下拉被复位 */
			// onRestore() {
			// 	this.triggered = true; // 需要重置
			// 	console.log("停止");
			// },
			// scrollBottem() {
			// 	this.status = "nomore"
			// },
			onPullDownRefresh() {
				let that = this;
				setTimeout(function() {
					if (that.num == 1) {
						that.request1();
					} else if (that.num == 2) {
						that.request2();
					} else {
						that.request3();
					}
				}, 1000);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		margin: 0 auto 10px;
		background: #fff;
		border-radius: 5px;
		position: relative;
		left: 0;
		right: 0;
		z-index: 9999;


		.one {
			border-bottom: 1px solid #f9f2f2;
			padding: 17px 0;
			width: 94%;
			margin: 0 auto;
			left: 0;
			right: 0;

			.title {
				left: 32rpx;
				position: relative;
				width: calc(100% - 50rpx);

			}
		}
	}

	.grid-text {
		margin-top: 40rpx;
		color: #000;
	}

	.content {
		width: 90%;
		// overflow-y: scroll;
		left: 0;
		right: 0;
		margin: 0 auto;
		margin-top: -70px;


		.vis {
			background: #fff;
			border-radius: 5px;
			padding: 10px;
		}
	}



	.hole:after {
		position: absolute;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 90rpx;
		content: attr(data-content);
		border-radius: 50%;
		border: 10px solid #4a9add;
		color: #4a9add;
		font-weight: bold;
		font-size: 40rpx;
		overflow: hidden;
	}

	.gdc /deep/ .u-size-default {
		padding: 5rpx 11rpx;
	}

	.scrollviewCss {
		// height: 82vh;
		height: calc(100vh - 200rpx);

		::-webkit-scrollbar {
			display: none;
		}
	}

	.gdc /deep/.u-empty {
		height: auto;
	}
</style>
